
<template>
  <div>
    <el-form :model="form" ref="ruleForm" label-width="100px" class="demo-ruleForm" label-position="left">
      <el-form-item label="选择活动：" prop="task_id">
        <el-select v-model="form.task_id" placeholder="请选择活动" clearable filterable style="width:100%">
          <el-option v-for="(item,index) in activeList" :key="index" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="flex aligncenter mb_20">
      <div class="mr_20">按示例模板格式填写兑奖码信息，填写完成后上传提交</div>
      <el-button type="text" @click="download">下载模板</el-button>
    </div>
    <div class="flexcolumn">
      <!-- <file-upload v-model="file" /> -->
      <el-button type="primary" size="small" class="uploadbtn">
        <input
          id="fileinput"
          type="file"
          name=""
          accept=".xls,.xlsx"
          class="inputbtn"
          @change="changeExcel($event)"
        />
        选取文件
      </el-button>
      <div v-if="file" class="fileinpt flexrowbetween mt_20 mb_20">
        <div class="itemname">
          <i class="el-icon-document f-18 mr_5"></i>{{ file.name }}
        </div>
        <i class="el-icon-delete f-18 c_BE0000 commhover" @click="clear"></i>
      </div>
      <span class="f-13 pt_15">注：订单核销码当前暂不支持批量核销</span>
    </div>
    <div class="flexend mt_30">
      <el-button type="primary" class="" @click="submitHx">确定</el-button>
      <el-button class="" @click="handClose">取消</el-button>
    </div>
  </div>
</template>

<script>
import { isOverSize } from "@/utils/validate";
import { subCodeFile } from "@/api/hexiao";
export default {
  data() {
    return {
      file: null,
      form:{
        task_id:''
      },
      activeList:[]
    };
  },
  props: {
    rowids: {
      default: [],
    },
  },
  created(){
    this.getDicts('/manage/index/taskIndex').then(res=>{
      this.activeList = res.data
    })
  },
  methods: {
    download() {
      var a = document.createElement("a");
      a.setAttribute("href", 'https://lottery.yywlcm.com/upload/template/upload/code.xls');
      a.download = '批量核销模板.xls'
      a.click();
      // a.dispatchEvent(event);
    },

    changeExcel(event) {
      var file = event.currentTarget.files[0];
      console.log("file:", file, event);
      if (isOverSize(file.size, 5)) {
        this.$message.warning("文件大小不能超过5MB");
        return;
      }
      this.file = file;
    },

    clear() {
      this.file = null;
      document.getElementById("fileinput").value = null;
    },

    handClose() {
      this.$emit("close");
    },

    submitHx() {
      if(!this.file){
        this.$message.warning('请选择文件')
        return
      }
      if(!this.form.task_id){
        this.$message.warning('请选择活动')
        return
      }
      if (this.file) {
        var formData = new FormData();
        formData.append("file", this.file);
        formData.append("task_id", this.form.task_id);
        subCodeFile(formData).then((res) => {
          this.$message.success("上传成功");
          this.$emit("close", 1);
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.elbotton {
  position: relative;

  .sloganimg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
  }
}
.uploadbtn {
  width: 100px;
  overflow: hidden;
  position: relative;
}
.inputbtn {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
}
.fileinpt {
  width: 420px;
  border: 1px solid #eee;
  border-radius: 2px;
  padding: 3px 10px;

  .itemname {
    width: 95%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>